<template>
  <view class="box">
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image class="image1" @click="fanhui" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />
	  <!-- #ifdef APP-PLUS -->
	  <image @click="fn" class="image2" src="https://pic.bangbangtongcheng.com/5bfdd20804944e49ac44a6d4acbf1225" mode="widthFix" />
	  <!-- #endif -->
    </view>
    <view class="tit">{{ datas.title }}</view>
    <view class="shijian">
      <view>{{ datas.update_date }}</view>
      <view>{{ datas.author }}</view>
      <!-- <view class="guan">关注</view> -->
    </view>
    <view class="xian"></view>
		<scroll-view scroll-y="true" class="scroll-view-wrap" :style="'height: calc(100vh - '+curTop+'px );'">
			<view class="con">
				<!-- #ifdef MP-WEIXIN -->
				<rich-text :nodes="datas.content"></rich-text>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<p v-html="datas.content"></p>
				<!-- #endif -->
			</view>
		</scroll-view>
		<uniBall></uniBall>
  </view>
</template>

<script>
  //#ifdef H5
  import wxshare from "../../utils/index.js";
  //#endif
  import {
    mapGetters
  } from "vuex";
  export default {
    data() {
      return {
        id: "",
        datas: {},
        userInfo: uni.getStorageSync("Pduser"),
				curTop:200
      };
    },
    computed: {
      ...mapGetters(["statusBarHeight1", "userinfo"])
    },
    onLoad(options) {
      this.id = options.id;
      this.getDetail();
      // this.ll();
      /* #ifdef H5 */
      this.jinzhi();
      /* #endif */
    },
    methods: {
		fn() {
			uni.showActionSheet({
				itemList: ["分享到微信好友", "分享到微信朋友圈"],
				success: res => {
					let wsxcene = null;
					if (res.tapIndex == 0) { //分享到好友 可以发送小程序
						wsxcene = "WXSceneSession";
						uni.share({
							provider: "weixin",
							scene: wsxcene,
							type: 5,
							title: this.datas.title,
							imageUrl:this.datas.image,
							miniProgram: {
								id: 'gh_c8b17811efca',
								path: "pages/index/bannerDetails?id=" + this.datas.id,
								type: 0,
								webUrl: "https://www.bangbangtongcheng.com/conven_web/#/pages/index/bannerDetails?id=" +
									this.datas.id,
							},
							success: function(res) {
								console.log("success:" + JSON.stringify(res));
							},
							fail: function(err) {
								console.log("fail:" + JSON.stringify(err));
							}
						});
					} else {
						uni.downloadFile({
						 	url: this.datas.image, //仅为示例，并非真实的资源
						 	success: (res) => {
						 		if (res.statusCode === 200) {
						 			let name=res.tempFilePath.substr(res.tempFilePath.lastIndexOf('/')+1); //截取文件名
						 			plus.zip.compressImage({
						 			     src: res.tempFilePath, //下载完图片的临时路径
						 			     dst: '_doc/photoData/'+name, //存储压缩完图片的临时路径
						 			     overwrite: true, //再次压缩会覆盖掉上次的目录
						 			     width:'150px', //缩放图片的宽度
										 height:'100px', //缩放图片的高度
										 quality:5,  //压缩图片质量,值越低,图片占内存越低                
						 			},event => { //压缩成功
						 			   wsxcene = "WXSceneTimeline"; //分享到朋友圈 只能H5 或者图片
						 			   uni.share({
						 			   	provider: "weixin",
						 			   	scene: wsxcene,
						 			   	type: 0,
						 			   	title: this.datas.title,
						 			   	href: "https://www.bangbangtongcheng.com/conven_web/#/pages/index/bannerDetails?id=" +
						 			   		this.datas.id,
						 			   	imageUrl: event.target,
						 			   	summary: "我正在看，" + this.datas.title + "赶紧跟我一起来查看！",
						 			   	success: function(res) {
						 			   		console.log("success:" + JSON.stringify(res));
						 			   	},
						 			   	fail: function(err) {
						 			   		console.log("fail:" + JSON.stringify(err));
						 			   	}
						 			   });
						 			},
						 			error => { //压缩失败
										uni.showToast({
											title: "压缩失败",
											icon: "none"
										});
						 			});
						 		}
						 	}
						 });
					}
				},
				fail: function(res) {
					console.log(res.errMsg);
				}
			});
		},
      fanhui() {
        uni.navigateBack({
          delta: 1
        });
      },
      ll() {
        if (this.userInfo) {
          let that = this;
          this.$myRequest
            .post("/mob/user/saveUserCollection", {
              userId: this.userInfo.id,
              type: "2",
              cbType: "4",
              relationId: this.id
            })
            .then(res => {});
        }
      },
      getDetail() {
		  let that=this
        this.$myRequest
          .get("/mob/home/getBannerDetail", {
            id: this.id
          })
          .then(res => {
            // console.log(res);
            this.datas = res.map;
			this.$nextTick(function(){
				// this.previewImg(null, this.datas.content)
				uni.createSelectorQuery().in(this).select('.scroll-view-wrap').boundingClientRect(result => {
				   if (result) { 
					   that.curTop=result.top
				     console.log('==========',result) 
				   }
				  }).exec(); 
			})
          });
      },
      jinzhi() {
        let _this = this;
        let param = window.location.href.split("#")[0];
        uni.request({
          method: "post",
          data: {
            url: param
          },
          header: {
            "content-type": "application/x-www-form-urlencoded"
          },
          url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
          success(re) {
            _this.setWxShare(re.data);
          }
        });
      },
      setWxShare(data) {
      	let _this = this;
      	wxshare.config({
      		debug: false, //是否打开调试
      		appId: data.appId, // 公众号的唯一标识
      		timestamp: data.timestamp, // 生成签名的时间戳
      		nonceStr: data.nonce, // ，生成签名的随机串
      		signature: data.signature, // 签名
      		jsApiList: [
      			"updateAppMessageShareData",
      			"updateTimelineShareData",
      			"openLocation",
      		],
      	});
      	wxshare.ready(function() {
      		//分享给朋友
      		wxshare.updateAppMessageShareData({
      			title: this.datas.title, // 分享标题
      			desc: this.datas.image, // 分享描述
      			link: `https://www.bangbangtongcheng.com/conven_web/#/pages/index/bannerDetails?id=${this.datas.id}`, // 当前页面链接pp
      			imgUrl: "https://pic.bangbangtongcheng.com/static/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%88%86%E4%BA%AB.png", // 分享图标
      			success: function() {
      				//分享成功回调
      			},
      			cancel: function() {
      				//取消分享回调
      			}
      		});
      		wxshare.updateTimelineShareData({
      			title:this.datas.title, // 分享标题
      			desc: this.datas.image, // 分享描述
      			link: `https://www.bangbangtongcheng.com/conven_web/#/pages/index/bannerDetails?id=${this.datas.id}`, // 当前页面链接pp
      			imgUrl: "https://pic.bangbangtongcheng.com/static/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%88%86%E4%BA%AB.png", // 分享图标
      			success: function() {},
      			cancel: function() {}
      		});
      	});
      },
      onShareAppMessage: function(res) {
      	let that = this;
      	if (res.from === "menu") {
      	}
		// debugger;
      	return {
      		title: this.datas.title,
      		path: "/pages/index/bannerDetails?id=" + this.datas.id,
      		desc: "找车就用帮帮同城",
      		imageUrl: "https://pic.bangbangtongcheng.com/static/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%88%86%E4%BA%AB.png",
      	};
      },
      onShareTimeline() {
      	return {
      		title: this.datas.title,
      		path: "/pages/index/bannerDetails?id=" + this.datas.id,
      		imageUrl: "https://pic.bangbangtongcheng.com/static/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%88%86%E4%BA%AB.png",
      	};
      },
    }
  };
</script>

<style lang="less" scoped>
  .box {
    width: 100%;
    min-height: 100vh;
    color: #333;
    background-color: #fff;
  }
	.scroll-view-wrap{ 
		/* #ifdef MP  */
		height: calc(
		  100vh - env(safe-area-inset-bottom) / 2 - var(--status-bar-height) - 88rpx - 5px - 22px  - 176rpx
		);
		/* #endif */
		/* #ifdef H5 || APP-PULS */
		height: calc(100vh - env(safe-area-inset-bottom) / 2 - var(--status-bar-height) - 88rpx - 5px - 5px - 170rpx);
		/* #endif */
		/* #ifdef APP */
		height: calc(100vh - env(safe-area-inset-bottom) / 2 - var(--status-bar-height) - 88rpx - 5px - 176rpx);
		/* #endif */
	}
  .tou {
    position: relative;
    width: 100%;
    // height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #64b6a8;

    .image1 {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      // top: 116rpx;
      left: 30rpx;
    }
    .image2 {
    			position: absolute;
    			width: 48rpx;
    			height: 48rpx;
    			bottom: 16rpx!important;
    			// top: 116rpx;
    			right: 30rpx;
    			/* #ifdef MP-WEIXIN */
    			position: initial;
    			margin-left: auto;
    			margin-right: 200rpx;
    			/* #endif */
    }
  }

  .tit {
    width: 690rpx;
    margin-left: 30rpx;
    margin-top: 40rpx;
    font-size: 34rpx;
    color: #333;
    font-weight: 600;
  }

  .shijian {
    margin-top: 16rpx;
    margin-left: 30rpx;

    view {
      display: inline-block;
      margin-right: 24rpx;
      height: 42rpx;
      line-height: 38rpx;
      font-size: 26rpx;
      color: #666;
    }

    .guan {
      width: 82rpx;
      height: 40rpx;
      border: 1rpx solid #64b6a8;
      text-align: center;
      font-size: 24rpx;
      border-radius: 22rpx;
      color: #64b6a8;
    }
  }

  .xian {
    width: 690rpx;
    height: 36rpx;
    margin-left: 30rpx;
    border-bottom: 2rpx solid #d0d0d0;
  }

  .con {
    padding: 30rpx;
    background: #fff;
  }
</style>